<template>
  <view>
    <!-- 加载状态显示 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner">
        <view class="loading-bounce"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <view v-else>
    <!-- 地址 -->
    <navigator url="/pages/sellment/address/address?source=1" class="address-section">
      <view class="order-content">
        <text class="yticon icon-shouhuodizhi"></text>
        <view class="cen" v-if="addressData">
          <view class="top" >
            <text class="name">{{ addressData.name }}</text>
            <text class="mobile">{{ addressData.mobile }}</text>
          </view>
          <text class="address">{{ addressData.region.replace(/,/g, '') }} {{ addressData.address }}</text>
        </view>
        <view v-else style="flex: 1">请选择收货地址</view>
        <text class="yticon icon-you"></text>
      </view>

      <image class="a-bg"
             src=""></image>
    </navigator>

    <view class="goods-section">
      <!--			<view class="g-header b-b">-->
      <!--				<image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image>-->
      <!--				<text class="name">西城小店铺</text>-->
      <!--			</view>-->
      <!-- 商品列表 -->
      <view style="margin-bottom: 10rpx; background-color: white; padding: 10upx 0" v-for="item in specList">
        <view class="goods-box-single">
          <album width="150rpx" style="width: fit-content" height="150rpx" :showExtraImages="false"
                 :images="item.images"
                 :maxCount="1" :previewEnabled="false"></album>
          <view class="right">
            <view style="display: flex; align-items: center; justify-content: space-between">
              <text class="title clamp" style="color: #303133">{{ item.itemName }}</text>
              <text class="price" style="color: black; font-weight: 500">{{ item.sellingPrice }}</text>
            </view>
            <view style="display: flex; align-items: center; justify-content: space-between">
              <text class="attr-box clamp">{{ item.name }}</text>
              <text class="attr-box">x{{ Number(item.buyQuantity).toFixed(0) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 金额明细 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">商品金额</text>
        <text class="cell-tip">￥{{ totalAmount }}</text>
      </view>
      <view class="yt-list-cell desc-cell">
        <text class="cell-tit clamp">备注</text>
        <up-input type="text" v-model="desc" :maxlength="100" count placeholder="请填写备注信息" border="none" />
      </view>
    </view>

    <!-- 底部 -->
    <view class="footer">
      <view class="price-content">
        <text>实付款</text>
        <text class="price-tip">￥</text>
        <text class="price">{{ totalAmount }}</text>
      </view>
      <text class="submit" @click="submit">提交订单</text>
    </view>

    <!-- 优惠券面板 -->
    <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
      <view class="mask-content" @click.stop.prevent="stopPrevent">
        <!-- 优惠券页面，仿mt -->
        <view class="coupon-item" v-for="(item,index) in couponList" :key="index">
          <view class="con">
            <view class="left">
              <text class="title">{{ item.title }}</text>
              <text class="time">有效期至2019-06-30</text>
            </view>
            <view class="right">
              <text class="price">{{ item.price }}</text>
              <text>满30可用</text>
            </view>

            <view class="circle l"></view>
            <view class="circle r"></view>
          </view>
          <text class="tips">限新用户使用</text>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import {addSellOrder} from "@/api/sell/sellOrder";
import {delCart} from "@/api/sell/cart";

export default {
  data() {
    return {
      isLoading: true, // 页面加载状态
      isSubmitting: false, // 提交订单状态
      maskState: 0, //优惠券面板显示状态
      desc: '', //备注
      payType: 1, //1微信 2支付宝
      specList: [],
      totalAmount: null,
      totalQuantity: null,
      addressData: null,
      couponList: [
        {
          title: '新用户专享优惠券',
          price: 5,
        },
        {
          title: '庆五一发一波优惠券',
          price: 10,
        },
        {
          title: '优惠券优惠券优惠券优惠券',
          price: 15,
        }
      ],
      cartIds: []
    }
  },
  onUnload() {
    uni.$off('addressData');
  },
  onLoad() {
    // 显示加载动画
    this.isLoading = true;

    uni.$on('addressData', (data) => {
      this.addressData = data
    })

    if (!this.globalData.goodsList || this.globalData.goodsList.length === 0) {
      this.$modal.msgError("订单创建失败");
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index'
        })
      }, 1000)
      return;
    }
    //商品数据
    this.specList = [...this.globalData.goodsList];
    this.cartIds = this.specList.map(({cartId}) => cartId).filter(cartId => cartId)

    this.specList.forEach(item => {
      this.totalAmount += Number(item.sellingPrice) * Number(item.buyQuantity)
      this.totalQuantity += Number(item.buyQuantity)
    })
    
    // 添加延迟以展示加载效果
    setTimeout(() => {
      this.isLoading = false;
    }, 600);
  },
  methods: {
    //显示优惠券面板
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 300;
      let state = type === 'show' ? 1 : 0;
      this.maskState = 2;
      setTimeout(() => {
        this.maskState = state;
      }, timer)
    },
    numberChange(data) {
      this.number = data.number;
    },
    changePayType(type) {
      this.payType = type;
    },
    submit() {
      // 避免重复提交
      if (this.isSubmitting) {
        return;
      }
      
      if (!this.addressData || !this.addressData.address) {
        this.$modal.msgError("请选择收货地址");
        return;
      }
      
      this.isSubmitting = true;
      
      const order = {
        totalQuantity: this.totalQuantity,
        totalAmount: this.totalAmount,
        orderStatus: 0,
        deliveryRegion: this.addressData.region,
        deliveryAddress: this.addressData.address,
        mobile: this.addressData.mobile,
        consignee: this.addressData.name,
        remark: this.desc,
        details: this.specList.map(item => {
          return {
            specId: item.id,
            productId: item.productId,
            quantity: item.buyQuantity,
            unitPrice: item.sellingPrice,
            amount: Number(item.sellingPrice) * Number(item.buyQuantity),
            images: item.images,
          }
        })
      }
      addSellOrder(order).then(async res => {
        if (this.cartIds.length !== 0) {
          await delCart(this.cartIds)
        }
        uni.redirectTo({
          url: `/pages/sellment/money/pay?orderId=${res.data}`
        })
      }).catch((msg) => {
        this.$modal.msgError(msg);
      }).finally(() => {
        this.isSubmitting = false;
      })
    },
    stopPrevent() {
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
  padding-bottom: 120rpx;
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100rpx);
  animation: fadeIn 0.5s ease-out;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0);
  }
  50% { 
    transform: scale(1.0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
}
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* 地址选择区域 */
.address-section {
  padding: 30rpx 0;
  background: #fff;
  position: relative;
  margin-bottom: 16rpx;
  animation: slideUp 0.5s ease-out;

  .order-content {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
  }

  .icon-shouhuodizhi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90rpx;
    color: #e84d1c;
    font-size: 44rpx;
  }

  .cen {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }

  .name {
    font-size: 34rpx;
    margin-right: 24rpx;
  }

  .address {
    margin-top: 16rpx;
    margin-right: 20rpx;
    color: #666;
  }

  .icon-you {
    font-size: 32rpx;
    color: #999;
    margin-right: 30rpx;
  }

  .a-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 5rpx;
  }
}

/* 商品列表区域 */
.goods-section {
  margin-top: 16rpx;
  background: #fff;
  padding-bottom: 1px;
  animation: slideUp 0.5s ease-out;
  animation-delay: 0.1s;
  }

.goods-box-single {
    display: flex;
  padding: 30rpx;
  background: #fff;

    .right {
    flex: 1;
      display: flex;
      flex-direction: column;
    padding-left: 24rpx;
      overflow: hidden;

    .title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }

    .attr-box {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 8rpx;
    }

      .price {
      color: #e84d1c;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
}

/* 金额明细 */
.yt-list {
  margin-top: 16rpx;
  background: #fff;
  animation: slideUp 0.5s ease-out;
  animation-delay: 0.2s;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  line-height: 70rpx;
  position: relative;

  &.b-b:after {
    left: 30rpx;
  }

  .cell-tit {
    flex: 1;
    font-size: 26rpx;
    color: #666;
    margin-right: 10rpx;
  }

  .cell-tip {
    font-size: 26rpx;
    color: #e84d1c;
  }

  &.desc-cell {
    .cell-tit {
      max-width: 90rpx;
    }
  }
}

/* 底部操作栏 */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  justify-content: space-between;
  font-size: 30rpx;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
  padding-bottom: env(safe-area-inset-bottom);
  animation: slideUp 0.5s ease-out;
  animation-delay: 0.3s;

  .price-content {
    padding-left: 30rpx;
  }

  .price-tip {
    color: #e84d1c;
    margin-left: 8rpx;
  }

  .price {
    font-size: 36rpx;
    color: #e84d1c;
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280rpx;
    height: 100%;
    color: #fff;
    font-size: 32rpx;
    background: linear-gradient(90deg, #ff7b00, #ff6b00);
    position: relative;
    overflow: hidden;
    
    &:active {
      opacity: 0.9;
    }
    
    /* 处理加载状态的样式 */
    &.loading:after {
      content: '';
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: loading-shine 1.5s infinite;
    }
  }
}

@keyframes loading-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: .3s;

  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: .3s;
    overflow-y: scroll;
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, .4);

    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;

  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }

  .time {
    font-size: 24upx;
    color: $font-color-light;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }

  .price {
    font-size: 44upx;
    color: $base-color;

    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }

  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }

  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;

    &.r {
      left: auto;
      right: -6upx;
    }
  }
}
</style>
